---
title: "Z-Index"
description: "Utilities for controlling the stack order of an element."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/zIndex'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Usage

Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `z-{index}` utilities.

```html fuchsia
<template preview class="p-4">
  <div class="flex justify-center relative h-28 text-center transform translate-x-12">
    <div class="z-40 relative w-20 h-20 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">5</div>
    <div class="z-30 relative w-20 h-20 -left-6 top-2 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">4</div>
    <div class="z-20 relative w-20 h-20 -left-12 top-4 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">3</div>
    <div class="z-10 relative w-20 h-20 -left-18 top-6 bg-fuchsia-500 border-r border-opacity-50 border-fuchsia-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">2</div>
    <div class="z-0 relative w-20 h-20 -left-24 top-8 bg-fuchsia-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">1</div>
  </div>
</template>

<div class="**z-40** ...">5</div>
<div class="**z-30** ...">4</div>
<div class="**z-20** ...">3</div>
<div class="**z-10** ...">2</div>
<div class="**z-0** ...">1</div>
```

## Responsive

To control the z-index of an element at a specific breakpoint, add a `{screen}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above.

```html
<div class="z-0 **md:z-50** ...">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Z-Index scale

By default, Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `theme.zIndex` section of your Tailwind config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      zIndex: {
        '0': 0,
-       '10': 10,
-       '20': 20,
-       '30': 30,
-       '40': 40,
-       '50': 50,
+       '25': 25,
+       '50': 50,
+       '75': 75,
+       '100': 100,
        'auto': 'auto',
      }
    }
  }
```

### Negative values

If you'd like to add any negative z-index classes that take the same form as Tailwind's [negative margin](/docs/margin#negative-margins) classes, prefix the keys in your config file with a dash:

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        zIndex: {
+         '-10': '-10',
        }
      }
    }
  }
```

Tailwind is smart enough to generate classes like `-z-10` when it sees the leading dash, not `z--10` like you might expect.

### Variants

<Variants plugin="zIndex" name="z-index" />

### Disabling

<Disabling plugin="zIndex" name="z-index" />
